ES6 中,引入了其他很多语言都具备的模式匹配
和默认参数
语法糖,使得代码简洁了不少。但是使用的时候还是有些细节需要注意。
模式匹配原理
模式匹配的种类
具体来说,有三种类型的模式匹配:
直接赋值
1let a = 1;对象模式
1let {name, age: age} = {name: 'yibuyisheng', age: 25};数组模式
1let [a, b] = [1, 2];
模式匹配的过程
直接赋值:x ← value(包括
undefined
和null
)1x = value对象模式
该种模式下,会检查匹配源是不是对象,如果不是对象,则会使用内部的 ToObject() 进行转换。
{«properties»} ← undefined
1throw new TypeError();{«properties»} ← null
1throw new TypeError();{key: «pattern», «properties»} ← obj
12«pattern» ← obj.key{«properties»} ← obj{key: «pattern» = default_value, «properties»} ← obj
1234567let tmp = obj.key;if (tmp !== undefined) {«pattern» ← tmp} else {«pattern» ← default_value}{«properties»} ← obj{} ← obj
1// No properties left, nothing to do
数组模式
该种模式下,右侧必须是可迭代的,如果不可迭代,就会抛出错误。
[«elements»] ← non_iterable
12assert(!isIterable(non_iterable))throw new TypeError();[«elements»] ← iterable
123assert(isIterable(iterable))let iterator = iterable[Symbol.iterator]();«elements» ← iterator
模式匹配中需要注意的
undefined 触发默认值
如下所示:
|
|
右侧的 underfined
元素会触发左侧的默认值。
在需要的时候才会去计算默认值
比如:
|
|
只有在右侧 someValue.prop
为 undefined
的时候才会执行 someFunc()
函数。
模式匹配中可以引用模式中前面的变量
比如:
|
|
这个地方要注意顺序,比如下面这个就是错误的:
|
|
函数参数传递
函数传参的过程,实际上就包含了模式匹配的过程:
|
|
函数默认参数,慎用对象引用
有如下示例代码:
|
|
默认参数使用了 list 引用,那么后续对 list 的修改,都会体现到默认参数上面去。在大型项目开发中,容易失控。如果一定要用某个变量生成默认值,建议深拷贝一份:
|
|
默认参数的作用域
使用最新版的 Chrome 浏览器执行下面的代码,注意输出结果:
|
|
实际上,将上述代码用 babel 转换一下,可以发现默认参数的处理过程发生在函数开始部分。